// 监控设备
function monitoringList(data, state) {
  if (data.length != 0) {
    vm.polymerizationemphasiscameraList = [];

    for (let [key, val] of Object.entries(data)) {
      // 位置
      var point = new BMap.Point(val.lng, val.lat)
      // 创建小车图标
      var myIcon = new BMap.Icon("./Package/images/tb/jk-c.png", new BMap.Size(30, 30));
      // 点位
      var marker = new BMap.Marker(point, { icon: myIcon });
      // 覆盖物标识
      marker.init = 'monitoring'
      vm.map.addOverlay(marker)

      var content = `
        <div class="MonitoringSty monbackingss">
          <div class="MonitoringSty-title">监控预览</div>
          <span>  地点: ${val.name}</span>
          <div class="MonitoringSty-video">
            <iframe id="child" src="./src/web3.0/cn/demo.html?ip=${val.ip}&username=${val.username}&password=${val.password}&port=${val.port}&channel=${val.channle}" width="100%" height="100%" frameborder=0></iframe>
          </div >

          <div class="controlVideo">
            <p onclick="deliver('top')" class="yxtop"></p>
            <p onclick="deliver('bottom')" class="yxbottom"></p>
            <p onclick="deliver('left')" class="yxleft"></p>
            <p onclick="deliver('right')" class="yxright"></p>

            <p onclick="deliver('tl')" class="yxtl"></p>
            <p onclick="deliver('tr')" class="yxtr"></p>
            <p onclick="deliver('bl')" class="yxbl"></p>
            <p onclick="deliver('br')" class="yxbr"></p>
          </div>

          <div class="CameraVariation">
            <div onclick="deliver('big')" class="CameraVariation_big">
              <img src="./Package/images/big.png" />
            </div>
            <div onclick="deliver('small')" class="CameraVariation_small">
              <img src="./Package/images/small.png" />
            </div>
          </div>

        </div >
        `

      addClickHandler(content, marker, 'monitoring') // 监控信息窗口

      // 标签创建
      var name = `
            <div style='width: auto; height: 22px; padding: 2px 5px; line-height: 22px; text-align: center;'>
              ${val['name']}
            </div>
          `
      var Distance = val['name'].length * 8
      var opts = {
        position: point,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(-Distance, 20)    //设置文本偏移量
      }
      let label = new BMap.Label(name, opts);  // 创建文本标注对象
      label.init = "monitoring"
      label.setStyle({
        color: "#000",       //文本颜色
        fontSize: "14px",
        lineHeight: "24px",
        fontFamily: "微软雅黑",
        border: "0",
        borderRadius: '4px'
      });
      vm.map.addOverlay(label);

      // 聚合
      vm.polymerizationemphasiscameraList.push(marker)
    }

    vm.polymerizationemphasiscamera = new BMapLib.MarkerClusterer(vm.map, {
      markers: vm.polymerizationemphasiscameraList,
      styles: [{
        url: './Package/images/cs.png',
        size: new BMap.Size(36, 36),
        color: 'pink',
        textSize: 20,
        textColor: 'red'
      }]
    });
    // 设置最大缩放级别
    vm.polymerizationemphasiscamera.setMaxZoom(11);
  }
}
// 医疗资源 
function SocialList(data) {
  if (data.length != 0) {
    vm.polymerizationMedicalList = [];
    for (let [key, val] of Object.entries(data)) {
      // 位置
      var point = new BMap.Point(val.lng, val.lat)
      // 创建小车图标
      var myIcon = new BMap.Icon("./Package/images/ylzy.png", new BMap.Size(34, 34));
      // 点位
      var marker = new BMap.Marker(point, { icon: myIcon });
      // 覆盖物标识
      marker.init = 'Medical'
      // vm.map.addOverlay(marker)
      marker.setTop({ isTop: true })

      var content = `
        <div class="MonitoringSty">
          <div class="MonitoringSty-title">资源信息</div>
          <span>
            地点: ${val.name}
          </span>
          <p>
            描述: ${val.details}
          </p>
        </div >
        `

      addClickHandler(content, marker, 'Medical') // 监控信息窗口

      // 标签创建
      var name = `
            <div style='width: auto; height: 22px; padding: 2px 5px; line-height: 22px; text-align: center;'>
              ${val['name']}
            </div>
          `
      var Distance = val['name'].length * 8
      var opts = {
        position: point,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(-Distance, 20)    //设置文本偏移量
      }
      let label = new BMap.Label(name, opts);  // 创建文本标注对象
      label.init = "Medical"
      label.setStyle({
        color: "#000",       //文本颜色
        fontSize: "14px",
        lineHeight: "24px",
        fontFamily: "微软雅黑",
        border: "0",
        borderRadius: '4px'
      });
      vm.map.addOverlay(label);


      vm.polymerizationMedicalList.push(marker);
    }

    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
    vm.polymerizationMedical = new BMapLib.MarkerClusterer(vm.map, {
      markers: vm.polymerizationMedicalList,
      styles: [{
        url: './Package/images/ylzy.png',
        size: new BMap.Size(34, 34),
        color: 'pink',
        textSize: 20,
        textColor: 'red'
      }]
    });
    // 设置最大缩放级别
    vm.polymerizationMedical.setMaxZoom(11);
  }
}

// 警力
function Policestateadd() {
  $.ajax({
    type: 'post',
    url: httpurl + 'event/personLocation/getPersonLocation',
    data: JSON.stringify({}),
    dataType: 'json',
    contentType: "application/json",
    headers: {
      Authorization: localStorage.getItem('token')
    },
    success: function (data) {
      // 成功的回调
      // console.log(data)

      for (let [key, val] of Object.entries(data.data)) {
        // 位置
        var point = new BMap.Point(val.lon, val.lat)
        // 创建小车图标
        var myIcon = new BMap.Icon("./Package/images/tb/ry.png", new BMap.Size(34, 34));
        // 点位
        var marker = new BMap.Marker(point, { icon: myIcon });
        // 覆盖物标识
        marker.init = 'policestate'
        vm.map.addOverlay(marker)
        marker.setTop({ isTop: true })

        var content = `
          <div class="MonitoringSty">
            <div class="MonitoringSty-title">人员信息</div>
            <span>
              名称: ${val.person.name}
            </span>
          </div >
          `
        //   <p>
        //   描述: ${val.details}
        // </p>

        addClickHandler(content, marker, 'policestate') // 监控信息窗口

        // 标签创建
        var name = `
              <div style='width: auto; height: 22px; padding: 2px 5px; line-height: 22px; text-align: center;'>
                ${val.person.name}
              </div>
            `
        var Distance = val.person['name'].length * 8
        var opts = {
          position: point,    // 指定文本标注所在的地理位置
          offset: new BMap.Size(-Distance, 20)    //设置文本偏移量
        }
        let label = new BMap.Label(name, opts);  // 创建文本标注对象
        label.init = "policestate"
        label.setStyle({
          color: "#000",       //文本颜色
          fontSize: "14px",
          lineHeight: "24px",
          fontFamily: "微软雅黑",
          border: "0",
          borderRadius: '4px'
        });
        vm.map.addOverlay(label);
      }

    },
    error: function (err) {
      // 失败的回调
    }
  })
}

// 车辆
function Vehiclestateadd() {
  $.ajax({
    type: 'post',
    url: httpurl + 'vehicle/vehicleDevice/list',
    data: JSON.stringify({}),
    dataType: 'json',
    contentType: "application/json",
    headers: {
      Authorization: localStorage.getItem('token')
    },
    success: function (data) {
      // 成功的回调
      // console.log(data)
			vm.polymerizationCarList = [];

      for (let [key, val] of Object.entries(data.data)) {
//      console.log(val)
				if(val.online == 1){
	        // 位置
	        var point = new BMap.Point(val.lng, val.lat)
	        // 创建小车图标
	        var myIcon = new BMap.Icon("./Package/images/tb/car.png", new BMap.Size(45, 45));
	        // 点位
	        var marker = new BMap.Marker(point, { icon: myIcon });
	        // 覆盖物标识
	        marker.init = 'vehiclestate'
	        vm.map.addOverlay(marker)
	        marker.setTop({ isTop: true })
	
	        var content = `
	          <div class="MonitoringSty">
	            <div class="MonitoringSty-title">车辆信息</div>
	            <span>
	              车牌号: ${val.vehiIdno}
	            </span>
	            <p>
	             位置: ${val.pos}
	           </p>
	          </div >
	          `
	             
	
	        addClickHandler(content, marker, 'vehiclestate') // 监控信息窗口
	
	        // 标签创建
	        var name = `
	              <div style='width: auto; height: 22px; padding: 2px 5px; line-height: 22px; text-align: center;'>
	                ${val.vehiIdno}
	              </div>
	            `
	        var Distance = val['vehiIdno'].length * 4
	        var opts = {
	          position: point,    // 指定文本标注所在的地理位置
	          offset: new BMap.Size(-Distance, 20)    //设置文本偏移量
	        }
	        let label = new BMap.Label(name, opts);  // 创建文本标注对象
	        label.init = "vehiclestate"
	        label.setStyle({
	          color: "#000",       //文本颜色
	          fontSize: "14px",
	          lineHeight: "24px",
	          fontFamily: "微软雅黑",
	          border: "0",
	          borderRadius: '4px'
	        });
	        vm.map.addOverlay(label);
					vm.polymerizationCarList.push(marker)
       }
      }
			//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
			vm.polymerizationCar = new BMapLib.MarkerClusterer(vm.map, {
			  markers: vm.polymerizationCarList,
			  styles: [{
			    url: './Package/images/caricon.png',
			    size: new BMap.Size(34, 34),
			    color: 'pink',
			    textSize: 20,
			    textColor: 'red'
			  }]
			});
			// 设置最大缩放级别
			vm.polymerizationCar.setMaxZoom(11);
    },
    error: function (err) {
      // 失败的回调
    }
  })
}

function deliver(state) {

  let Node = document.getElementById('child');
  Node.contentWindow.postMessage(state, Node.src)
}